<template>
    <div class="login">
        <div class="header">
            <span @click="goback()" class="goback"></span>
            <span>京东登陆注册</span>
        </div>

        <div class="tologin">
            <p>
                <section class="box">
                    <span class="b-first">+86</span>
                    <span class="b-second"></span>
                </section>
                <input type="text" placeholder="请输入手机号" class="firstinput">
                <i class="del"></i>
            </p>
            <p>
                <input type="text" placeholder="请输入收到的验证码" class="firstinput secondinput">
                <i class="del seconddel"></i>
                <button>获取验证码</button>
            </p>
        </div>

        <div class="login-in">
            <router-link to="/">
                登录
            </router-link>
        </div>
        <div class="login-in loginin-now">
            <router-link to="/">
                一键登录
            </router-link>
        </div>

        <p class="small-btn">
            <span class="btn1">账号密码登录</span>
            <span class="btn2">手机快速注册</span>
        </p>

        <div class="other-way">
            <h6>其他登录方式</h6>
            <div class="way">
                <router-link to="/" class="qq">
                    QQ
                </router-link>
                <router-link to="/" class="wechart">
                    微信
                </router-link>
            </div>
            <div class="bottom">
                <p>未注册的手机号验证后将自动创建京东账号, 登录即代表您已同意<router-link to="/">京东隐私政策</router-link></p>
                <p></p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        goback(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
    .login{
        text-align: left;
        background: #fff;
        padding: 0 1.25rem 1.25rem;
    }
    .login .header{
        display: block;
        height: 44px;
        line-height: 44px;
        background-color: #fff;
        font-size: 17px;
        position: relative;
        z-index: 100;
        text-align: center;
    }
    .login .header .goback{
        background: url(); 
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: absolute;
        top: 10px;
        width: 24px;
        height: 24px;
        display: block;
        left: 0;
    }
    .login .tologin p{
        background: #fff;
        border-bottom: 1px solid #efefef;
        height: 2rem;
        padding-top: .1rem;
        padding-bottom: 1.1rem;
        margin-top: 1.2rem;
        position: relative;
    }
    .login .tologin .box{
        position: absolute;
        width: 1.72rem;
        height: 2rem;
        top: 6px;
        left: 6px;
        line-height: 1.5rem;
        font-size: 1.16rem;
    }
    .login .tologin .b-first{
        font-family: PingFangSC-Semibold;
        display: inline-block;
        text-align: center;
        width: 2.5rem;
    }
    .login .tologin .b-second{
        background-image: url();
        background-repeat: no-repeat;
        background-size: 100% auto;
        display: inline-block;
        position: absolute;
        right: -37px;
        width: 1rem;
        height: 1.2rem;
        top: 10px;
    }
    .login .tologin .firstinput{
        padding-left: 80px;
        width: 80%;
        height: 100%;
        outline: none;
        border: none;
        font-size: 1.16rem;
    }
    .login .tologin .del{
        position: absolute;
        top: -5px;
        right: 0;
        background: url();
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 0;
        height: 100%;
        width: 1.5rem;
    }
    .login .tologin .secondinput{
        padding-left: 0px;
    }
    .login .tologin .seconddel{
        right: 135px;
    }
    .login .tologin button{
        border: none;
        border-left: 1px solid #ccc;
        background: #fff;
        border-radius: 0;
        padding: 0;
        color: #848689;
        position: absolute;
        right: 0;
        top: 10px;
        padding-left: 2.5rem;
        font-size: 1rem;
    }
    .login .login-in a{
        width: 100%;
        height: 3.5rem;
        line-height: 3.5rem;
        display: block;
        background-color: #efefef;
        border-radius: 2.25rem;
        background-image: linear-gradient(90deg,#fab3b3,#ffbcb3 73%,#ffcaba);
        text-align: center;
        font-family: PingFangSC-Semibold;
        font-size: 1.16rem;
        color: #fff;
        text-decoration: none;
    }
    .login .loginin-now a{
        background: #fff;
        margin-top: 1.1rem;
        border: 1px solid #ff2000;
        color: #f10000;
    }
    .login .small-btn{
        color: rgba(0,0,0,.4);
        font-size: 1.14rem;
        margin-top: 1.2rem;
    }
    .login .small-btn .btn1{
        float: left;
    }
    .login .small-btn .btn2{
        float: right;
    }
    .login .other-way{
        margin-top: 9.88rem;
        border-top: 1px solid rgba(0,0,0,.1);
        font-size: 1rem;
    }
    .login .other-way h6{
        color: rgba(0,0,0,.2);
        width: 7.4rem;
        margin: -1.11rem auto 0;
        background: #fff;
        text-align: center;
    }
    .login .other-way .way{
        text-align: center;
        margin: 1.25rem 0 1.12rem;
    }
    .login .other-way .way a{
        display: inline-block;
        width: 3.48rem;
        color: rgba(0,0,0,.4);
        margin: 0 1.15rem;
        background-size: 100% auto;
        padding-top: 3.53rem;
        background-repeat: no-repeat;
        text-decoration: none;
    }
    .login .other-way .way .qq{
        background-image: url();
    }
    .login .other-way .way .wechart{
        background-image: url();
    }
    .login .bottom{
        text-align: center;
        font-size: 15.13px;
    }
    .login .bottom a{
        color: #4a90e2;
        text-decoration: none;;
    }
</style>